<template>
  <div>
    <el-card class="QRcode">
      <el-row :gutter="10">
        <el-col :span="8" v-for="item in QRcode" :key="item.id">
          <el-card>
            <div slot="header">
              <span class="header">{{ item.header }}</span>
            </div>
            <el-image :src="'http://localhost:5000/' + item.url" fit="contain"></el-image>
            <div>
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="small"
                plain
                @click="QRcodeBut(item.id)"
                >修改</el-button
              >
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <!-- 模态框 -->
    <el-dialog title="二维码修改" :visible.sync="dialogFormVisible">
      <el-form :model="formData">
        <div id="upload">
          <label class="el-form-item__label" style="width: 80px"
            >上传图片</label
          >
          <!--elementui的上传图片的upload组件-->
          <el-upload
            ref="upload"
            class="upload-demo"
            drag
            action="#"
            accept="image/png,image/gif,image/jpg,image/jpeg"
            :limit="1"
            multiple
            :auto-upload="false"
            :http-request="uploadPicture"
            :before-upload="uploadIfFrom"
            :on-exceed="maxFile"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过2M
            </div>
          </el-upload>
        </div>

        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { AddQRCode, selQRCode } from "../../api/picture";
export default {
  data() {
    return {
      QRcode: [
        {
          id: 1,
          header: "微信群",
          url: require('../../assets/imgs/001.jpg'),
        },
        {
          id: 2,
          header: "微信公众号",
          url: require('../../assets/imgs/002.jpg'),
        },
        {
          id: 3,
          header: "QQ群",
          url: require('../../assets/imgs/003.jpg'),
        },
      ],
      QRcodeId: "",
      dialogImageUrl: "",
      dialogVisible: false,
      dialogFormVisible: false,
      formData: {
        id: "",
      },
    };
  },
  // provide / inject（注入依赖） 组合刷新页面
  inject: ["reload"],
  mounted() {
    this.selGetQRCode();
  },

  methods: {
    // 查询二维码
    selGetQRCode() {
      selQRCode().then((data)=>{
        console.log(data);
        this.QRcode[0].url = data.data.vxCode.qrCode;
          this.QRcode[1].url = data.data.vxGzhCode.qrCode;
          this.QRcode[2].url = data.data.qqCode.qrCode;
      }).catch(err=>{
        console.log(err);
      });
    },


    QRcodeBut(id) {
      this.QRcodeId = id;
      this.dialogFormVisible = true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    uploadPicture(file) {
      // 获取file中的文件file
      var fileObj = file.file;

      //  新建一个FormData储存文件
      var fileFrom = new FormData();
      //   将fileObj存入FormData中
      fileFrom.append("imageFile", fileObj);
      fileFrom.append("QRCodeType", this.QRcodeId);
      console.log(this.QRcodeId);

      AddQRCode(fileFrom)
        .then((data) => {
          console.log(data);
          // 清空图片
          // this.$refs.upload.clearFiles();
          this.dialogFormVisible = false;
          // 刷新页面
          location.reload();
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //   文件超出最大上传数时的钩子
    maxFile() {
      this.$notify.error({
        title: "错误",
        message: "超出最大上传文件数咯",
      });
    },
    // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
    uploadIfFrom(file) {
      console.log("before");

      if (
        !(
          file.type === "image/png" ||
          file.type === "image/gif" ||
          file.type === "image/jpg" ||
          file.type === "image/jpeg"
        )
      ) {
        this.$notify.error({
          title: "错误",
          message:
            "请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片",
        });
        return false;
      }

      let size = file.size / 1024 / 1024 < 2;
      if (!size) {
        this.$notify.error({
          title: "错误",
          message: "图片大小必须小于2M",
        });
        return false;
      }
    },
    // 手动点击提交按钮触发
    handleSave() {
      // 判断轮播图封面图片是否为空
      if (this.$refs.upload.uploadFiles.length > 0) {
        this.$refs.upload.submit();
        // this.reload();
      } else {
        this.$notify.error({
          title: "错误",
          message: "请上传轮播图封面图!",
        });
      }
    },
  },
};
</script>

<style scoped>
.QRcode {
  text-align: center;
}
.header {
  text-align: center;
  font-weight: bold;
}
.el-image {
  height: 180px;
  margin-bottom: 10px;
}
</style>